 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS3 GitHub Buttons</title> 
    <meta name="description" content="Using CSS3 to create GitHub-style buttons from links, buttons, and inputs"> 
    <style>
        /* ------------------------------------------------------------------------------------------------------------- RESET */

        html, body, div, form, p,
        code, pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

        /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */

        body { font: 14px/1.333 sans-serif; color: #444; background: #eee; }

        a { color: #980905; }
        a:hover, a:focus, a:active { text-decoration: none; }

        h1 { margin: 0 0 0.5em; font-size: 36px; }
        h2 { margin: 0 0 0.75em; font-size: 21px; }
        h3 { margin: 0 0 0.333em; font-size: 16px; font-weight: normal; }
        p { margin: 0 0 1.333em; }
        em { font-style: italic; }
        table { border-collapse: separate; border-spacing: 0; margin: 0; vertical-align: middle; }
        th { font-weight: bold; }
        th, td { padding: 5px 25px 5px 5px; text-align: left; vertical-align: middle; }
        pre, code { font-family: monospace, sans-serif; font-size: 1em; color:#080; }

        /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */

        .container { position:relative; overflow:hidden; width: 600px; padding: 40px 60px; border: 1px solid #ccc; margin: 40px auto 20px; background: #fff; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1); box-shadow: 0 0 15px rgba(0,0,0,0.1); }

        .container pre,
        .container .prettyprint { padding: 0; border: 0; margin: 0 0 20px; font-size: 13px; background: #fff; }

        .ribbon { position: absolute; top: -1px; right: -1px; opacity: 0.9; }
        .ribbon:hover, .ribbon:focus, .ribbon:active { opacity: 1; }
        .ribbon img { display: block; border: 0; }

        .header { padding-right:80px; }

        .section { margin: 40px 0 20px; }

        .example { padding: 20px; border: 1px solid #ccc; margin: 10px -20px 20px; }

        .footer { margin: 20px 0 50px; font-size: 11px; color: #666; text-align: center; }
        .footer a { color: #666; }
    </style>
    
    <link rel="stylesheet" href="gh-buttons.css">
    
    <!-- prettyify -->
    <link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"> 
    <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> 
</head> 
<body onload="prettyPrint()">

<div class="container">
    <a class="ribbon" href="http://github.com/necolas/css3-github-buttons" target="_blank"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
    
    <div class="header">
        <h1>CSS3 GitHub Buttons</h1>
        <p><b><a href="http://github.com/necolas/css3-github-buttons" title="GitHub repository">CSS3 GitHub Buttons</a> helps you easily create GitHub-style buttons from links, buttons, and inputs.</b></p>
    </div>
    
    <div class="section">
        <h2>Buttons</h2>
        <p>The "buttons" can be created by adding <code>class="button"</code> to any appropriate <code>&lt;a></code>, <code>&lt;button></code>, or <code>&lt;input></code> element. Add a further class of <code>pill</code> to create a button pill-like button. Add a further class of <code>primary</code> to emphasise more important actions.</p>

        <div class="example">
            <pre class="code prettyprint"><code>&lt;a href="#" class="button">Post comment&lt;/a></code></pre>
            <form>
                <a href="#button" class="button">Post comment (link)</a>
                <input class="button" type="submit" value="Post comment (input)">
                <button class="button" type="submit">Post comment (button)</button>
            </form>
        </div>
        
        <div class="example">
            <pre class="prettyprint"><code>&lt;a href="#" class="button pill">This is a pill button&lt;/a></code></pre>
            <a href="#button" class="button pill">This is a pill button</a>
        </div>

        <div class="example">
            <pre class="prettyprint"><code>&lt;a href="#" class="button primary">Publish post&lt;/a> 
&lt;a href="#" class="button">Save as draft&lt;/a></code></pre>
            <a href="#button" class="button primary">Publish post</a> <a href="#button" class="button">Save as draft</a>
        </div>
    </div>

    <div class="section">
        <h2>Buttons with dangerous actions</h2>
        <p>If you have a button that triggers a <em>dangerous</em> action, like deleting data, this can be indicated by adding the class <code>danger</code>.</p>
        <div class="example">
            <pre class="prettyprint"><code>&lt;a href="#" class="button danger">Delete post&lt;/a></code></pre>
            <a href="#button" class="button danger">Delete post</a>
        </div>
    </div>
    
    <div class="section">
        <h2>Big buttons</h2>
        <p>If you wish to emphasize a specific action you can add the class <code>big</code>.</p>
        
        <div class="example">
            <pre class="prettyprint"><code>&lt;a href="#" class="button big">Create Project&lt;/a></code></pre>
            <a href="#button" class="button big">Create Project</a>
        </div>
    </div>

    <div class="section">
        <h2>Grouped buttons</h2>
        <p>Groups of buttons can be created by wrapping them in an element given a class of <code>button-group</code>. A less important group of buttons can be marked out by adding a further class, <code>minor-group</code>.</p>
        
        <div class="example">
<pre class="prettyprint"><code>&lt;div class="button-group">
    &lt;a href="#" class="button primary">Dashboard&lt;/a>
    &lt;a href="#" class="button">Inbox&lt;/a>
    &lt;a href="#" class="button">Account&lt;/a>
    &lt;a href="#" class="button">Logout&lt;/a>
&lt;/div></code></pre>
            <div class="button-group">
                <a href="#button" class="button primary">Dashboard</a>
                <a href="#button" class="button">Inbox</a>
                <a href="#button" class="button">Account</a>
                <a href="#button" class="button">Logout</a>
            </div>
        </div>
        
        <div class="example">
<pre class="prettyprint"><code>&lt;ul class="button-group">
    &lt;li>&lt;a href="#" class="button primary pill">Dashboard&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#" class="button pill">Inbox&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#" class="button pill">Account&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#" class="button pill">Logout&lt;/a>&lt;/li>
&lt;/ul></code></pre>    
            <ul class="button-group">
                <li><a href="#button" class="button primary pill">Dashboard</a></li>
                <li><a href="#button" class="button pill">Inbox</a></li>
                <li><a href="#button" class="button pill">Account</a></li>
                <li><a href="#button" class="button pill">Logout</a></li>
            </ul>
        </div>
        
        <div class="example">
<pre class="prettyprint"><code>&lt;div class="button-group <b>minor-group</b>">&hellip;&lt;/div></code></pre>
            <div class="button-group minor-group">
                <a href="#button" class="button primary">Dashboard</a>
                <a href="#button" class="button">Inbox</a>
                <a href="#button" class="button">Account</a>
                <a href="#button" class="button">Logout</a>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>Mixed groups</h2>
        <p>Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class <code>button-container</code>.</p>
        
        <div class="example">
<pre class="prettyprint"><code>&lt;div class="actions <b>button-container</b>">
    &lt;a href="#" class="button primary">Compose new&lt;/a>
    
    &lt;div class="button-group">
        &lt;a href="#" class="button primary">Archive&lt;/a>
        &lt;a href="#" class="button">Report spam&lt;/a>
        &lt;a href="#" class="button danger">Delete&lt;/a>
    &lt;/div>
                        
    &lt;div class="button-group minor-group">
        &lt;a href="#" class="button">Move to&lt;/a>
        &lt;a href="#" class="button">Labels&lt;/a>
    &lt;/div>
&lt;/div></code></pre>
            <div class="actions button-container">
                <a href="#button" class="button primary">Compose new</a>
                
                <div class="button-group">
                    <a href="#button" class="button primary">Archive</a>
                    <a href="#button" class="button">Report spam</a>
                    <a href="#button" class="button danger">Delete</a>
                </div>
                                    
                <div class="button-group minor-group">
                    <a href="#button" class="button">Move to</a>
                    <a href="#button" class="button">Labels</a>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>Buttons with icons</h2>
        <p>A range of icons can be added (only for links and buttons) by adding a class of <code>icon</code> and any one of the provided icon classes:</p>
            
        <div class="example">
            <pre class="prettyprint"><code>&lt;a href="#" class="button icon search">Search&lt;/a></code></pre>
            <a href="#button" class="button icon search">Search</a>
        </div>
        
        <div class="example">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Class</th>
                        <th scope="col">Example</th>
                    </tr>
                </thead>
                <tr>
                    <td scope="row"><code>.arrowup</code></td>
                    <td><a href="#button" class="button icon arrowup">Move up</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.arrowdown</code></td>
                    <td><a href="#button" class="button icon arrowdown">Move down</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.arrowleft</code></td>
                    <td><a href="#button" class="button icon arrowleft">Move left</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.arrowright</code></td>
                    <td><a href="#button" class="button icon arrowright">Move right</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.approve</code></td>
                    <td><a href="#button" class="button icon approve">Approve registration</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.add</code></td>
                    <td><a href="#button" class="button icon add">Add post</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.remove</code></td>
                    <td><a href="#button" class="button danger icon remove">Remove item</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.log</code></td>
                    <td><a href="#button" class="button icon log">View log</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.calendar</code></td>
                    <td><a href="#button" class="button icon calendar">Add to calendar</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.chat</code></td>
                    <td><a href="#button" class="button icon chat">Start chat</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.clock</code></td>
                    <td><a href="#button" class="button icon clock">Start timer</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.settings</code></td>
                    <td><a href="#button" class="button icon settings">Settings</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.comment</code></td>
                    <td><a href="#button" class="button icon comment">Add comment</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.fork</code></td>
                    <td><a href="#button" class="button icon fork">Fork</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.like</code></td>
                    <td><a href="#button" class="button icon like">Like</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.favorite</code></td>
                    <td><a href="#button" class="button icon favorite">Favorite</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.home</code></td>
                    <td><a href="#button" class="button icon home">Back to homepage</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.key</code></td>
                    <td><a href="#button" class="button icon key">Password protect</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.lock</code></td>
                    <td><a href="#button" class="button icon lock">Lock</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.unlock</code></td>
                    <td><a href="#button" class="button icon unlock">Unlock</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.loop</code></td>
                    <td><a href="#button" class="button icon loop">Resend message</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.search</code></td>
                    <td><a href="#button" class="button icon search">Search</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.mail</code></td>
                    <td><a href="#button" class="button icon mail">Send email</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.move</code></td>
                    <td><a href="#button" class="button icon move">Move</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.edit</code></td>
                    <td><a href="#button" class="button icon edit">Edit post</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.pin</code></td>
                    <td><a href="#button" class="button icon pin">Pin to Map</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.reload</code></td>
                    <td><a href="#button" class="button icon reload">Reload page</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.rss</code></td>
                    <td><a href="#button" class="button icon rss">Subscribe to RSS feed</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.tag</code></td>
                    <td><a href="#button" class="button icon tag">Add tag</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.trash</code></td>
                    <td><a href="#button" class="button danger icon trash">Delete post</a></td>
                </tr>
                <tr>
                    <td scope="row"><code>.user</code></td>
                    <td><a href="#button" class="button icon user">Add new user</a></td>
                </tr>
            </table>
        </div>
    </div>

    <div class="section">
        <h2>Browser compatibility</h2>
        <p>Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.</p>
        <p><strong>Note:</strong> Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer prior to IE 8. The use of icons is not supported in IE 6 or IE 7.</p>
    </div>

    <div class="section">
        <h2>License</h2>
        <p>Public domain: <a href="http://unlicense.org/">http://unlicense.org/</a></p>
    </div>

    <div class="section">
        <h2>Acknowledgements</h2>
        <p>Inspired by <a href="http://michaelhenriksen.dk">Michael Henriksen</a>'s <a href="http://github.com/michenriksen/css3buttons">CSS3 Buttons</a>. Icons from <a href="http://somerandomdude.com/projects/iconic/">Iconic pack</a>.</p>
    </div>
</div>

<div class="footer">
    <a href="http://github.com/necolas/css3-github-buttons">CSS3 GitHub Buttons</a> by <a href="http://nicolasgallagher.com" title="Website of Nicolas Gallagher">Nicolas Gallagher</a>.
</div>

</body>
</html>